React+Redux+AntD - 0 极简事项.md

http和浏览器的工作原理和内部机制要巩固一下,特别是涉及到性能、进程线程、同步异步什么的

1 关于React特点

声明式开发

减少大量dom操作代码量

可以和其他框架并存

react只去管理id=”root”的div的渲染。jQuery可以管理其他div操作。

组件化

  • 区分组件和标签
    xxx
  • 组件之间通信:父向子:属性,接收用props。子向父:调用父组件的方法

单向数据流

父组件可以向子组件传值(只读),子组件不能去改变这个值。

why单项数据流:防止其中一个改变时出现bug,难以定位是哪一个组件改变导致的错误。

视图层框架

只解决数据和渲染的问题,不解决react复杂传值问题,可以借助其他redux等数据传递框架

函数式编程

代码逻辑清晰:拆分函数,各司其职;

前端自动化测试便捷:只需要给函数一个数值,查看输出是否符合预期。

3 Redux知识点

Redux设计和使用的三大原则

  • store是唯一的
  • 只有store只有自己能够改变自己的内容

Redux的核心API

  • createStore 创建store
  • store.dispatch 派发action,传递给store
  • store.getState 获取store中所有数据内容
  • store.subscribe 订阅store的改变。只要store改变,其接收的回调函数就会被执行

Redux中间件

image-20190419101024985

在action和store之间。

对store的dispatch方法的封装、升级。根据参数不同,执行不同的操作。

  • 原始:接收对象后,将对象直接传递给store。
  • 升级后:传递对象和之前一样;传递函数,不会直接传递,而是先执行,执行完后,若需要调用store,该函数内再调用store。
  • 例子:
    • redux-logger中间件,在传递过程中,将action打印。
    • redux-thunk异步问题:将异步放在actionCreator中
    • redux-saga异步问题:将异步单独放在文件中

React-Redux

Redux的官方React绑定库

使react组件从redux store中读取数据,并且向store分发actions来更新数据。

提供:Provider组件:核心组件,把store提供给每一个内部组件,也叫提供器

功能:从最外部封装了整个应用,并向connect模块传递store。

连接: connect方法,前两个参数为连接的规则,最后的参数为本组件TodoList。

mapStateToProps:store里的数据、和组件里的数据关系关联(组件获取store数据)

mapDispatchToProps:组件里props如何对store里的数据做修改、和store里的dispatch方法做关联。(组件通过dispatch修改store)

// 实际上:todoList是一个UI组件,connect把UI组件和业务逻辑(数据、派发)结合,返回的结果为一个容器组件。
// 导出的内容就是connect的执行结果:容器组件

前端知识

构建工具

webpack